<template style="background: #f5f5f9;">
	<view style="background: #f5f5f9;">
		<view id="app" class="app-height">
		    <view class="myGold">
		        <view class="bill" @click="toMyBill">
		            <image mode="widthFix" src="https://m.nocexpo.com/statics/js/modules/h5/img/icon_bill.png" />
		            账单
		        </view>
		        <view class="gold">
		            <image mode="widthFix" src="https://m.nocexpo.com/statics/js/modules/h5/img/my-gold.png"/>
		            <view class="gold-num">
		                <view class="p">{{account}}</view>
		                <view class="p">我的金币</view>
		            </view>
		        </view>
		        <view class="gold-btn">
		            <view class="button" @click="toRecharge">充值</view>
		            <view class="button" @click="toWithDraw">提现</view>
		        </view>
		    </view>
		</view>
	</view>
</template>

<script>
import commonApi from '@/utils/commonMethod.js';

export default {
	data() {
		return {
			currentUser:"",//当前用户
			account:'',//账户金币
			
			startTime:'', //进入页面时间
			endTime:'',//离开页面时间
			currentUrl:'',//当前页面全路径
		}
	},
	onShow(){
			
		setTimeout(()=> {
			
			if (getApp().globalData.onShow) {
				getApp().globalData.onShow = 0;
				console.log("demo前后台切换之切到前台")
			}
			else {
				console.log("demo页面被切换显示")
				this.startTime = +new Date();
			}
			
		}, 100);
	},
	onHide(){
		setTimeout(() => {
			var that = this
			if (getApp().globalData.onHide) {
				getApp().globalData.onHide = 0;
				console.log("还在当前页面活动")
			}
			else {
				that.endTime = +new Date();
				console.log("demo页面停留时间：" + (that.endTime - that.startTime))
				var stayTime = Math.round((that.endTime - that.startTime)/1000);
			   //这里获取到页面停留时间stayTime，然后了可以上报了
			   this.saveFootPrint(stayTime);
			}
		}, 100)
	},
	onUnload(){
			setTimeout(() => {
			var that = this
			if (getApp().globalData.onHide) {
				getApp().globalData.onHide = 0;
				console.log("还在当前页面活动")
			}
			else {
				that.endTime = +new Date();
				console.log("demo页面停留时间：" + (that.endTime - that.startTime))
				var stayTime = Math.round((that.endTime - that.startTime)/1000);
			   //这里获取到页面停留时间stayTime，然后了可以上报了
			   this.saveFootPrint(stayTime);
			}
		}, 100)
	},
	async mounted() {
		const res = await commonApi.currentUserAxios();
		this.currentUser = res.data.session_user_h5;

		this.account = this.currentUser.account/100
		
		const pages = getCurrentPages()
		const currentPage =pages[pages.length - 1]
		this.currentUrl = currentPage.$page.fullPath
	},
	methods: {
		  saveFootPrint(stayTime){
		      commonApi.saveFootPrint(this.currentUser.id,this.startTime,stayTime,this.currentUrl,"我的金币")
		  			
		  },
		//去充值
		toRecharge(){
			console.log("去充值");
			uni.navigateTo({
				url: '/pages/person/topUp'
			})
			// window.location.href = "/h5/topUp.html"
		},
		//账单
		toMyBill(){
			console.log("账单");
			uni.navigateTo({
				url: '/pages/person/myBill'
			})
			// window.location.href = "/h5/personalcenter/myBill.html"
		},
		//去提现
		toWithDraw(){
			console.log("去提现");
			uni.navigateTo({
				url:'/pages/person/withdraw'
			})
			// window.location.href = "/h5/personalcenter/withdraw02.html"
		}

	}
}
</script>

<style>
	.myGold {
	    padding-top: 140rpx;
	}
	.myGold .bill {
	    position: fixed;	
	    line-height: 57rpx;
	    right: 0px;
	    top: 24rpx;
	    border-top-left-radius: 28rpx;
	    border-bottom-left-radius: 28rpx;
	    background-color: #ffffff;
	    padding: 0px 14rpx 0px 21rpx;
	}
	.myGold .bill image {
	    width: 22rpx;
	    vertical-align: middle;
	    margin-top: -7rpx;
	    margin-right: 7rpx;
	}
	.myGold .gold {
	    width: 70%;
	    margin: auto;
	    position: relative;
	}
	image {
	    width: 100%;
	}
	
	image {
	    vertical-align: top;
	}
	.myGold .gold .gold-num {
	    text-align: center;
	}
	.myGold .gold .gold-num .p:first-child {
	    font-size: 20px;
	}
	.myGold .gold .gold-num .p:last-child {
	    font-size: 14px;
	}
	.myGold .gold-btn {
	    margin-top: 112rpx;
	}
	.myGold .gold-btn .button:first-child {
	    background-color: #029e9d;
	    color: #ffffff;
	}
	.myGold .gold-btn .button {
	    width: 70%;
	    display: block;
	    margin: auto;
	    height: 84rpx;
	    font-size: 18px;
	    border-radius: 42rpx;
	    border: 0px;
	    background-color: #ffffff;
	    margin-bottom: 37rpx;
		text-align: center;
		line-height: 84rpx;
	}
</style>